<template>
    <div class="topocabinet">
        <vHeadSpace />
        <div class="cabinet-content">
            <vAsideSpace />
            <el-main class="cabinet-main">
                <div class="cabinet-content-left-top">
                    <!-- title -->
                    <div style="height: 80px;">
                        <h3 style="margin:0;padding:0;font-size: 32px;text-align: center;line-height: 32px">机柜预览</h3>
                        <h4 style="margin:0;padding:0;font-size: 16px;text-align: center">所属机房：{{currentEngineRoom}}</h4>
                        <div style="float: left;margin:0">
                            <el-button @click="back" type="primary" size="small">返回机房</el-button>
                            <el-button @click="dialogFormVisible = true" type="success" size="small" style="margin-left: 5px">创建机柜</el-button>
                        </div>
                    </div>
                    <div class="el-menu-cabinet">
                        <el-table
                                :data="cabinetsData"
                                height="100%"
                                border
                                style="width: 100%"
                                :cell-style="{padding:'8px'}">
                            <el-table-column
                                    prop="serial_number"
                                    label="机柜编号"
                                    align="center"
                                    width="120">
                            </el-table-column>
                            <el-table-column
                                    prop="name"
                                    label="机柜名称"
                                    align="center"
                                    width="120">
                            </el-table-column>
                            <el-table-column
                                    prop="engineroom_number"
                                    label="所属机房"
                                    align="center"
                                    width="120">
                            </el-table-column>
                            <el-table-column
                                    prop="description"
                                    label="描述信息"
                                    align="center">
                            </el-table-column>
                            <el-table-column
                                    prop="operation"
                                    label="相关操作"
                                    align="center">
                                <template slot-scope="scope">
<!--                                    <el-button size="small">编辑</el-button>-->
<!--                                    <el-button size="small" @click = "deleteCabinet(scope.row)">删除</el-button>-->
                                    <el-button size="small" @click = "chooseEngines">物理机划入</el-button>
                                    <el-button size="small">拓扑构建</el-button>
                                    <router-link :to="{name:'TopoMapEdit', query: {'currentEngineRoom': currentEngineRoom,'currentRoomNo':currentRoomNo,'currentCabinet':scope.row.name}}">
                                        <el-button style="margin-left: 10px;margin-right: 10px" size="small">查看拓扑图</el-button>
                                    </router-link>
                                    <el-button size="small">其它操作</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <!--                </div>-->
                        <!--                // 弹窗-物理机选择-->
                        <!--                <div>-->
                        <el-dialog title="选择物理机" :visible.sync="dialogEngineChooseVisible">
                            <el-tree
                                    :data="data"
                                    show-checkbox
                                    default-expand-all
                                    node-key="id"
                                    ref="tree"
                                    highlight-current
                                    :props="defaultProps">
                            </el-tree>
                        </el-dialog>
                    </div>
                    <el-dialog title="创建机柜" :visible.sync="dialogFormVisible">
                        <el-form :model="cabinetForm">
                            <el-form-item label="机柜编号" :label-width="'120px'">
                                <el-input v-model="serial_number" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="机柜名称" :label-width="'120px'">
                                <el-input v-model="name" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="所属机房" :label-width="'120px'">
                                <el-input v-model="engineroom_number" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="描述信息" :label-width="'120px'">
                                <el-input v-model="description" autocomplete="off"></el-input>
                            </el-form-item>
                        </el-form>
                        <div slot="footer" class="dialog-footer">
                            <el-button @click="dialogFormVisible = false">取 消</el-button>
                            <el-button type="primary" @click="createCabinet(serial_number,name,engineroom_number,description)">确 定</el-button>
                        </div>
                    </el-dialog>
                </div>
                <div class="cabinet-content-left-bottom">
                    <vFootSpace />
                </div>
            </el-main>
        </div>
    </div>
</template>

<script>
    export default {
        data(){
            return {
                cabinetsData:[],
                imgsrc: require('../../assets/img/topo/topo.png'),
                dialogEngineChooseVisible: false,
                dialogFormVisible: false,
                serial_number: '', //机柜编号
                name: '', //机柜名称
                engineroom_number: '',//所属机房编号
                description: '',//机柜描述信息
                cabinetForm: '',
                data: [{
                    id: 1,
                    label: '服务器',
                    children: [{
                        id: 4,
                        label: 'linux',
                        children: [{
                            id: 9,
                            label: '服务器01'
                        }, {
                            id: 10,
                            label: '服务器02'
                        }]
                    }]
                }, {
                    id: 2,
                    label: '主机',
                    children: [{
                        id: 5,
                        label: 'Linux'
                    }, {
                        id: 6,
                        label: 'windows'
                    }]
                }, {
                    id: 3,
                    label: '交换机',
                    children: [{
                        id: 7,
                        label: 'switch01'
                    }, {
                        id: 8,
                        label: 'switch02'
                    }]
                }],
                defaultProps: {
                    children: 'children',
                    label: 'label'
                }
            }
        },
        props:['currentEngineRoom','currentRoomNo'],
        // computed:{
        //     currentEngineRoom(){
        //         return this.$route.params.currentEngineRoom
        //     }
        // },
        methods:{
          //获取机柜数据
          getCabinetData() {
            this.engineroom_number = this.currentRoomNo
            this.$axios({
              method: "post",
              url: "/map/getAllCabinetBelongToRoom.action",
              data: {
                engineroom_number: this.currentRoomNo
              }
            }).then((response) => {
              this.cabinetsData = response.data.content.result
            })
          },
          // 创建机柜
          createCabinet(No,Name,cabinetNo,des) {
              this.$axios({
                method: "post",
                url: "map/buildCabinet.action",
                data: {
                  serial_number: No,
                  name: Name,
                  engineroom_number: cabinetNo,
                  description: des
                }
              }).then((response) => {
                this.dialogFormVisible = false;
                //清空输入框
                this.serial_number = '';
                this.name = '';
                this.engineroom_number = '';
                this.description = '';
                //显示添加成功信息
                this.$message({
                  message: '机柜添加成功',
                  type: 'success'
                });
                this.getCabinetData()
              }).catch(()=> {
                this.dialogFormVisible = false;
                this.$message({
                  type: 'error',
                  message: '机柜添加失败'
                });
              })
            },

          //删除机柜
          deleteCabinet(row) {
            this.$confirm('是否确认删除机柜'+row.name,'提示',{
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              this.$axios({
                method: "post",
                url: "map/"
              })
            })
          },
          lookTopo(){
              this.$router.push('/hostMapEdit')
          },
          back(){
              this.$router.replace('/topoEngineRoom')
          },
          chooseEngines(){
              this.dialogEngineChooseVisible = true
          },
          topoDetail() {
            this.$router.push('/topoMapEdit')
          }
        },
        mounted() {
          this.getCabinetData()
        }
    }
</script>

<style scoped>
    .topocabinet{
        height: 100%;
        width: 100%;
        background-color: #F0F2F5;
        position: absolute;
    }
    .cabinet-content{
        display: flex;
        margin-top: 60px;
        height: 92%;
        width: 100%;
    }
    .cabinet-main{
        height: 100%;
        width: 100%;
        margin-top: 0;
        padding:10px;
    }
    .cabinet-content-left-top {
        height: 97%;
        overflow-x:hidden
    }
    .cabinet-content-left-bottom{
        height:3%;
        background-color: #F0F2F5;
        text-align: center;
    }
    .left_title{
        margin: 0;
        display: block;
        font-size: 16px;
    }
    .room_icon {
        margin-left: 20rem;
    }
    .el-button--success {
      color: #FFF;
      background-color: #67C23A;
      border-color: #67C23A;
      margin-left: 50rem;
    }
    .el-menu-cabinet {
      /*background: #135c3a !important;*/
      margin-top: 1rem;
      height: 500px;
      background-color: whitesmoke
    }
</style>